<template>
  <Modal
    :visible="showModal"
    @cancel="closeModal"
    title="新增文件系统"
    okText="确认"
    @ok="submitForm"
    cancelText="取消"
  >
    <Form ref="formRef" name="fileSystemForm" :model="fileSystemList">
      <Space
        v-for="(sfs, index) in fileSystemList"
        :key="sfs.id"
        style="display: flex; margin-bottom: 8px"
        align="baseline"
      >
        <FormItem
          :name="[index, 'shareProto']"
          :rules="{
            message: 'Missing sfs',
            required: true,
          }"
        >
          <Select
            v-model:value="sfs.shareProto"
            :options="fsSpecifications.map((a) => ({ value: a, label: a, key: a }))"
            placeholder="请选择文件系统规格"
            style="width: 180px"
          ></Select>
        </FormItem>
        <FormItem
          :name="[index, 'size']"
          :rules="{
            required: true,
            message: '请选择大小',
          }"
        >
          <InputNumber :max="327680" :min="500" v-model:value="sfs.size" />
        </FormItem>
        <span> GB </span>
        <FormItem
          :name="[index, 'num']"
          label="数量"
          :rules="{
            required: true,
            message: '请选择数量',
          }"
        >
          <InputNumber :max="25" :min="1" v-model:value="sfs.num" />
        </FormItem>

        <MinusCircleOutlined class="ml-50px" @click="removeFileSystem(sfs)" />
      </Space>
      <FormItem>
        <Button type="dashed" block @click="addFileSystem"> <PlusOutlined />添加文件系统 </Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { getSfsList, batchAddFs } from '../../../api/system-mgmt/app-mgmt/app';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { Modal, Form, FormItem, Select, InputNumber, Space, Button } from 'ant-design-vue';

const props = defineProps({
  appId: {
    type: String,
  },
});
const showModal = ref<boolean>(false);

const fileSystemList = ref();
const fsSpecifications = ref();
const fetchSfsList = async () => {
  const res = await getSfsList();
  fileSystemList.value = [{ shareProto: res[0], size: 500, num: 1 }];
  fsSpecifications.value = res;
};
fetchSfsList();

const openModal = () => {
  showModal.value = true;
};
const closeModal = () => {
  showModal.value = false;
};

const addFileSystem = () => {
  fileSystemList.value.push({
    shareProto: fsSpecifications.value[0],
    size: 500,
    num: 1,
  });
};
const removeFileSystem = (item) => {
  let index = fileSystemList.value.indexOf(item);
  if (index !== -1) {
    fileSystemList.value.splice(index, 1);
  }
};
const submitForm = async () => {
  await batchAddFs({
    ...fileSystemList.value,
    appId: props.appId,
  });
  closeModal();
};

defineExpose({ openModal, closeModal });
</script>

<style lang="less" scoped></style>
